<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .rb_bottom {
            margin-top: 20px;
        }

        .rb_bottom,
        .rb_bottom .fy-y,
        .rb_bottom .pnbtn,
        .rb_bottom .previous,
        .rb_bottom .next {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .fy-y {
            padding: 6px 12px;
            box-sizing: border-box;
            background: #fff;
            color: #4f4f4f;
            font-size: 14px;
            font-weight: 500;
            margin-right: 12px;
            cursor: pointer;
            user-select: none;
        }

        .fy-d {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #000;
            margin-right: 12px;
        }

        .selected {
            background: #cc1616;
            color: #fff;
            border: 0;
        }

        .pnbtn,
        .previous,
        .next {
            width: 62px;
            height: 31px;
            box-sizing: border-box;

            font-weight: 500;
            font-size: 14px;
            cursor: pointer;
            color: #000;
            user-select: none;
            background: #fff;
        }

        .previous {
            margin-right: 12px;
        }

        .next {
            margin-right: 12px;
        }

        .pageInput {
            /* box-sizing: border-box; */
            width: 30px;
            margin: 0px 10px;
            padding: 3px 5px;
        }

        .count {
            margin: 0px 10px;
            padding: 3px 5px;
        }
    </style>
</head>

<body>
    <div class="rb_bottom">

    </div>

    <script src="./lib/jquery-3.5.1.js"></script>
    <script>

        //总页数
        var total = 20;
        //页面初始化调用 生成页码
        makePage(total, 1);


        //生成页码函数
        function makePage(total, page) {
            var pageHtml = '';
            //点点点的html
            var ddd = '<span class="fy-d"></span><span class="fy-d"></span><span class="fy-d"></span>';
            function createPage(index) { //单页码生成
                if (page == index) {
                    //当前页(或选中)样式 多了个selected(换背景色字体色的)
                    pageHtml += '<span class="fy-y selected" >' + page + '</span>';
                } else {
                    pageHtml += '<a  class="fy-y" onclick="pageClick(this)">' + index + '</a>';
                }
            }

            if (total <= 10) {//总页数小于10
                for (var i = 1; i <= total; i++) {
                    //正常生成排列
                    createPage(i);
                }
            } else {
                if (page <= 4) { //总页数大于10且当前页远离总页数(小于4)
                    for (var i = 1; i <= 4 + 1; i++) {//显示1-5
                        createPage(i);
                    }
                    //三个点...
                    pageHtml += ddd;
                    //三个点后面 生成最后一个页数
                    createPage(total);

                } else if (page > total - 4) { //总页数大于10且当前页接近总页数(大于总页数-4)
                    //第一页
                    createPage(1);
                    //三个点...
                    pageHtml += ddd;
                    //生成最后5个页数
                    for (var i = total - 4; i <= total; i++) {
                        createPage(i);
                    }
                } else {  //除开上面两个情况 当前页在中间
                    //页数1
                    createPage(1);
                    //三个点...
                    pageHtml += ddd;
                    //生成当前页和 前跟后一个页数
                    for (var i = page - 1; i <= page + 1; i++) {
                        createPage(i);
                    }
                    //三个点...
                    pageHtml += ddd;
                    //最后一个页数
                    createPage(total);
                }
            }

            if (page > 1 && total > 1) { // 上一页
                pageHtml = '<a href="#start" class="previous" onclick="first()">First</a>' + '<a href="#-1" class="previous" onclick="previous()">Prev</a>' + pageHtml;
            } else {
                pageHtml = '<a href="#start" class="previous">First</a>' + '<a href="#-1" class="previous">Prev</a>' + pageHtml;
            }
            if (page < total && total > 1) { // 下一页
                pageHtml += '<a href="#+1" class="next" onclick="next()">Next</a>' + '<a href="#end" class="next" onclick="last()">Last</a>';
            } else {
                pageHtml += '<a href="#+1" class="next">Next</a>' + '<a href="#end" class="next" onclick="last()">Last</a>';
            }

            // 设置跳转到第几页

            pageHtml += 'to  <input type="text" class="pageInput" id="pageInput" onkeydown="if(event.keyCode==13) {changeCurrentPage()}" />'


            // 设置每页显示条数

            pageHtml +=
                `
            count
            <select class="count" onchange="pageCount(this)">
                <option value="10">10</option>
                <option value="15">15</option>
                <option value="20">20</option>
                <option value="25">25</option>
                <option value="30">30</option>
                <option value="35">35</option>
                <option value="40">40</option>
                <option value="45">45</option>
                <option value="50">50</option>
            </select>
            `

            // 页码
            pageHtml += `<span class="fy-count">${page}/${total}</span>`
            //赋值生成html
            $('.rb_bottom').html(pageHtml);


            // 设置上下页按钮颜色
            if (document.documentElement.clientWidth > 700) {

                if (page == 1) {
                    document.querySelectorAll(".previous")[0].setAttribute('style', 'color: #d5d5d5')
                    document.querySelectorAll(".previous")[1].setAttribute('style', 'color: #d5d5d5')
                }
                if (page == total) {
                    document.querySelectorAll(".next")[0].setAttribute('style', 'color: #d5d5d5')
                    document.querySelectorAll(".next")[1].setAttribute('style', 'color: #d5d5d5')

                }
            }


        }
        //首页点击事件
        function first() {
            //获取当前页

            makePage(total, 1);
        }

        //末页点击事件
        function last() {
            //获取当前页

            makePage(total, total);
        }

        //上一页点击事件
        function previous() {
            //获取当前页
            var page = $('.rb_bottom>.selected').text();
            if (page <= 1) {
                return;
            }
            makePage(total, page - 1);
        }
        //下一页点击事件
        function next() {
            //获取当前页
            var page = $('.rb_bottom>.selected').text();
            if (page >= total) {
                return;
            }
            makePage(total, page * 1 + 1);
        }
        //直接点击页数事件
        function pageClick(that) {
            var page = $(that).html();
            makePage(total, page * 1);
        }

        // 获取页码回车
        function changeCurrentPage() {
            $("#pageInput").keydown(function (event) {
                if (event.keyCode == 13) {
                    let val = $('#pageInput').val()
                    console.log('跳到', val);
                }
            })
        }


        // 设置每页显示条数
        function pageCount(e) {
            console.log($(e).val());
        }



    </script>
</body>

</html>